<template>
  <div class="login-container">
    <div class="login-content">
      <img
          :src="logoImg"
          class="companyLogo"
          alt=""
      >
      <div class="bg_img">
        <img
            :src="loginImg"
            alt=""
        >
      </div>
      <el-form
          ref="loginForm"
          :model="loginForm"
          :rules="loginRules"
          class="login-form"
          auto-complete="on"
          label-position="left"
      >
        <div class="title-container">
          <h3 class="title">{{ companyName }}</h3>
        </div>

        <el-form-item prop="username">
          <div class="icon_name">
            <i class="el-icon-user" />
          </div>
          <el-input
              ref="username"
              v-model="loginForm.username"
              placeholder="用户名"
              name="username"
              type="text"
              tabindex="1"
              @keyup.enter.native="confirmLogin"
              auto-complete="on"
          />
        </el-form-item>

        <el-form-item prop="password">
          <div class="icon_name">
            <i class="el-icon-lock" />
          </div>
          <el-input
              ref="password"
              v-model="loginForm.password"
              :type="passwordType ? 'password' : 'text'"
              placeholder="密码"
              name="password"
              tabindex="2"
              auto-complete="on"
              @keyup.enter.native="confirmLogin"
          />
          <div
              v-if="passwordType"
              class="iconfont icon-eye-close"
              @click="passwordType=!passwordType"
          />
          <div
              v-if="!passwordType"
              class="iconfont icon-eye"
              @click="passwordType=!passwordType"
          />
        </el-form-item>
        <el-button
            type="primary"
            style="
            width: 100%;
            margin-bottom: 30px;
            border-radius: 37px;
            background: #0076FE;
          "
            @click.native.prevent="confirmLogin"
        >
          登录
        </el-button>
      </el-form>
    </div>
  </div>
</template>

<script>
import logoImg from '@/images/logo.png';
import loginImg from '@/images/denglu.png';
import * as api from "@/api/index";

export default {
  name: 'Login-',
  data() {
    return {
      logoImg,
      loginImg,
      companyName: 'MistletoeDD',
      passwordType: true,
      loginForm: {
        username: '',
        password: '',
      },
      loginRules: {
        username: [
          {
            required: true,
            message: '请输入用户名',
            trigger: 'blur',
          },
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur',
          },
          {
            min: 5,
            message: '密码不能少于5位',
            trigger: 'blur',
          },
        ],
      },
    };
  },
  methods: {
    confirmLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (!valid) {
          return;
        }
        api.Login(this.loginForm.username,this.loginForm.password).then((res) => {
          const result = res.body.meta;
          if(result.status===200){
            localStorage.setItem('token',result.token)
            this.$router.push({
              path:'/Home'
            })
          }else{
            this.$message.error(result.msg);
          }
        });
      });
    },
  },
};
</script>


<style lang='scss' scoped>
$bg: #151412;
.login-container {
  min-height: 100%;
  width: 100%;
  background: url('./../../images/beijing.png') no-repeat center;
  background-size: 100% 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;

  .login-content {
    width: 1000px;
    height: 600px;
    min-width: 1000px;
    position: relative;

    .companyLogo {
      position: absolute;
      left: 100px;
      top: 100px;
      height: 40px;
      width: 220px;
      z-index: 1;
    }

    .bg_img {
      position: absolute;
      left: 0;
      top: 0;
      display: flex;
      justify-content: center;
      width: 100%;
      height: 600px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .login-form {
      position: absolute;
      left: 50%;
      width: 40%;
      max-width: 100%;
      padding: 160px 35px 0;
      margin: 0 auto;
      overflow: hidden;

      .title-container {
        .title {
          font-size: 26px;
          color: #000;
          margin: 0 auto 40px auto;
          text-align: center;
          font-weight: bold;
        }
      }

      /deep/ .el-input {
        display: inline-block;
        width: 80%;

        .el-input__inner {
          background: transparent;
          border: 0;
          -webkit-appearance: none;
          border-radius: 0;
          border: none;
          padding: 12px 5px 12px 0;
          color: #000;
          height: 30px;

          &:-webkit-autofill {
            box-shadow: 0 0 0 1000px #fff inset !important;
          }
        }
      }

      /deep/ .el-form-item {
        &.is-error {
          border: 1px solid red;
        }

        margin-bottom: 25px;
        color: #000;
        width: 100%;
        border: 1px solid #eeeeee;
        border-radius: 37px;

        .icon_name {
          width: 10%;
          display: inline-block;
          text-align: center;
          padding: 0 5px;
        }

        /deep/ .el-form-item__content{
          position: relative;
        }

        .icon-eye-close,.icon-eye {
          width: 20px;
          height: 10px;
          cursor: pointer;
          display: inline-block;
          text-align: center;
          position: absolute;
          right: 15px;
          top: 0;
        }
      }

      /deep/ .el-form-item__error {
        left: 30px;
      }

      .footer-operate {
        display: flex;
        margin-bottom: 20px;

        .operate-left {
          flex: 1;
          display: flex;
          justify-content: flex-start;

          /deep/ .el-checkbox__label {
            font-weight: 400;
            color: #333333;
          }
        }

        .operate-right {
          flex: 1;
          display: flex;
          justify-content: flex-end;
          color: #b9bed1;
          cursor: pointer;
        }
      }

      .downLoadDialog {
        display: flex;
        justify-content: flex-end;
        font-size: 14px;
        font-weight: 400;
        color: #999999;
        line-height: 18px;
        cursor: pointer;
      }
    }
  }
}
</style>
